<template>
    <h1 class="row-title">对话框事例</h1>
    <div class="row">
       <XiaoQuan-Button type="primary" @click="visible = true">对话框一</XiaoQuan-Button>
       <XiaoQuan-Button type="primary" @click="visible2 = true">对话框二</XiaoQuan-Button>
       <XiaoQuan-Button type="primary" @click="visible3 = true">对话框三</XiaoQuan-Button>
    </div>
    <XiaoQuan-Dialog v-model:visible="visible" @close="visible = false"></XiaoQuan-Dialog>
    <XiaoQuan-Dialog title="这是一个自定义标题" width="30vw" top="40vh" v-model:visible="visible2" @close="visible2 = false">
        这是一个基本对话框
    </XiaoQuan-Dialog>
    <XiaoQuan-Dialog title="这是一个自定义标题" width="30vw" top="40vh" v-model:visible="visible3" @close="visible3 = false">
        这是一个基本对话框
        <template #footer>
            <XiaoQuan-Button @click="visible3 = false">取消</XiaoQuan-Button>
            <XiaoQuan-Button @click="visible3 = false" type="primary">确认</XiaoQuan-Button>
        </template>
    </XiaoQuan-Dialog>
</template>

<script setup>
    import { ref } from "vue";
    const visible = ref(false);
    const visible2 = ref(false);
    const visible3 = ref(false);
</script>

<style lang="scss" scoped>

</style>